/**
 * 态势图
 */
<template>
  <div id="situation-map">
    <!-- 地图组件 -->
    <Map v-if="fkRuralId"
         :fkRuralId="fkRuralId"
         :key='fkRuralId'></Map>
    <!-- 地图图例 -->
    <div class="legend">
      <div class="legend-type">
        <div v-for="item in legendList"
             :key="item.type">
          <span :style="{ background: item.color }"></span>
          <span>{{item.type}}</span>
        </div>
      </div>
      <div class="grid-number">
        <div><span>网格：</span><span>{{gridNum}}</span></div>
        <div><span>微网格：</span><span>{{microGridNum}}</span></div>
      </div>
    </div>
    <!-- 顶部导航栏 -->
    <div class="top-banner">
      <div class="left-icon"></div>
      <div class="center-title">
        <!-- <img src="../../assets/images/situationMap/left-circle.gif" /> -->
        <!-- <span class="sys-name">{{systemName}}</span> -->
        <!-- <img src="../../assets/images/situationMap/right-circle.gif" /> -->
      </div>
      <div class="right-icon"></div>
      <div class="enterTheSystem"
           @click="enterTheSystem"><i class="el-icon-s-unfold"></i>返回系统</div>
    </div>
    <!-- 主体内容 -->
    <div class="bottom-main">
      <!-- 左侧内容 -->
      <div class="main-left">
        <div class="village-info">
          <div class="div-title">{{ruralInfo ? ruralInfo.rfRuralName : ''}}</div>
          <div class="div-info">
            <div class="img">
              <!-- <img :src="setUrl(ruralInfo ? ruralInfo.centerPhoto : '')" /> -->
              <el-carousel height='21rem'
                           trigger="click"
                           indicator-position="none"
                           arrow='never'
                           :interval='4000'>
                <el-carousel-item v-for="item in (`${ruralInfo.groupPhoto === ''? (ruralInfo.centerPhoto):(ruralInfo.centerPhoto + ',' +ruralInfo.groupPhoto)}`).split(',')"
                                  :key="item">
                  <img :src="setUrl(item ? item : '')"
                       style="width: 100%;height: 23.4167rem" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="info-box">
              <div class="secretary-info">
                <img class="header-img"
                     :src="headerImg" />
                <!-- <span :style="`background: url(${headerImg})`"
                      class="header-img"></span> -->
                <div class="party-name">党组织书记：{{ruralInfo ? ruralInfo.secretaryName : ''}}</div>
                <div class="label-list"
                     v-if="ruralInfo && ruralInfo.tagList && ruralInfo.tagList.length > 0">
                  <div v-for="item in ruralInfo.tagList"
                       :key="item.id">
                    <img class="label-icon"
                         :src="setUrl(item.icon)" />
                    <div class="label-name">{{item.itemName}}</div>
                  </div>
                </div>
              </div>
              <div class="party-info">
                <div v-for="(item, index) in partyList"
                     :key="item.title">
                  <span class="imgs">
                    <img :src="item.icon" />
                  </span>
                  <div>
                    <span class="title">{{item.title}}</span>
                    <span class="value"
                          v-if='index === 0'>{{item.value}}</span>
                    <countTo v-else
                             class="value"
                             :startVal='0'
                             :separator='""'
                             :key='partyInfoKey'
                             :endVal='item.value'
                             :duration='3000'></countTo>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="branch-situation">
          <div class="div-title">党组织情况</div>
          <div class="div-info">
            <div class="party-member-info">
              <div class="count">
                <span class="label"><img src="../../assets/images/situationMap/USER@2x.png" />党员</span>
                <!-- <div class="sex-count">{{ruralInfo ? (ruralInfo.partyMemberNumber - (ruralInfo.partyMemberNumber % 10)) /10 : 0}}</div>
                <div class="sex-count">{{ruralInfo ? ruralInfo.partyMemberNumber % 10 : 0}}</div> -->
                <div class="sex-count"
                     v-if='(ruralInfo && Math.floor(ruralInfo.partyMemberNumber/100))'>
                  <countTo class="count"
                           :startVal='0'
                           :key="countToKeyOen"
                           :endVal='(ruralInfo && Math.floor(ruralInfo.partyMemberNumber/100) ? Math.floor(ruralInfo.partyMemberNumber/100) : 0)'
                           :duration='1000'></countTo>
                </div>
                <!-- <div class="sex-count"
                     v-if='(ruralInfo && (ruralInfo.partyMemberNumber - (ruralInfo.partyMemberNumber % 10)) /10)'>
                  <countTo class="count"
                           :startVal='0'
                           :endVal='(ruralInfo ? (ruralInfo.partyMemberNumber - (ruralInfo.partyMemberNumber % 10)) /10 : 0)'
                           :duration='3000'></countTo>
                </div> -->
                <div class="sex-count"
                     v-if='(ruralInfo && Math.floor(ruralInfo.partyMemberNumber%100/10))'>
                  <countTo class="count"
                           :startVal='0'
                           :key="countToKeyTow"
                           :endVal='(ruralInfo ? Math.floor(ruralInfo.partyMemberNumber%100/10) : 0)'
                           :duration='1000'></countTo>
                </div>
                <div class="sex-count">
                  <countTo class="count"
                           :startVal='0'
                           :key="countToKeythree"
                           :endVal='(ruralInfo ? ruralInfo.partyMemberNumber%100%10 : 0)'
                           :duration='1000'></countTo>
                </div>
              </div>
              <div class="participation-rate">
                <Echarts v-if="ruralInfo && ruralInfo.partyActivitiesRatio > 0"
                         :width="'100%'"
                         :height="'100%'"
                         :option="participationRate"></Echarts>
                <div class="title">党员活动平均参与率</div>
              </div>
            </div>
            <div class="party-member-distribution"
                 @mouseover.stop="MemberDistributionOver()"
                 @mouseout.stop="MemberDistributionOut()">
              <ul>
                <li v-for="(item, index) in partyType"
                    :key="item.typeName"
                    :class="item.typeName === activeIndex ? 'active' : ''"
                    @click="changeActive(item.typeName, index)">{{item.typeName}}</li>
              </ul>
              <div class="education-echarts">
                <Highcharts v-if='distributeList.length > 0'
                            :key="activeIndex"
                            :width="'100%'"
                            :height="'100%'"
                            :option="educationOption"></Highcharts>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="main-center">
        <div class="strong-base-index">
          <div class='div-title'>强基指数</div>
          <div class="div-info">
            <div class='evaluation-score'
                 v-if="seriesData && seriesData.length > 0">
              <!-- <Echarts :width="'436.8px'"
                       :height="'170px'"
                       :option="evaluationScore"></Echarts>
              <span v-for="item in titleList"
                    :key="item.text"
                    class="tooltip"
                    :style="{ position: 'absolute', top: item.top, left: item.left, color: item.color}">
                <span class="label"
                      :style="{'border-width': '1px', 'border-style': 'solid', 'border-color': item.color }">{{item.text}}</span>
                <span class="label-line"></span>
              </span>
              <div class="evaluation-label">测评分数</div> -->
              <div class="grid">
                <div v-for="(item, index) in seriesData"
                     :key="index"
                     class="gridLiquidfill">
                  <liquidfill :option='item'
                              :width='"100%"'
                              :height='"100%"'></liquidfill>
                </div>
                <!-- <div></div>
                <div></div>
                <div></div> -->
              </div>
            </div>
            <div class="index-rank">
              <div class="rank-item"><span>镇排名：</span><span>{{rankInfo.townRanking}}</span></div>
              <div class="rank-item"><span>区排名：</span><span>{{rankInfo.countyRanking}}</span></div>
              <div class="rank-item"><span>荣誉分：</span><span>{{rankInfo.honorPoints}}</span></div>
              <!-- <div class="line"></div> -->
              <div class="rank-item total"><span>总分：</span><span>{{rankInfo.totalScore}}</span></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="main-right">
        <div class="connectivity-index">
          <div class="div-title">连心服务</div>
          <div class="div-info">
            <div class="tab-list">
              <div v-for="item in connectingService"
                   :key="item.title">
                <img :src="item.icon" />
                <span class="title">{{item.title}}</span>
                <span class="percent"
                      :style="{ color: item.isUp ? '#3AD8D8' : '#ED5052' }"><img :src="item.isUp ? require('../../assets/images/situationMap/up.png') : require('../../assets/images/situationMap/down.png')" />{{item.value1}}%</span>
                <!-- <span class="number">{{item.value2}}{{item.title === '微力量' ? '' : '条'}}</span> -->
                <span class="number">
                  <countTo class="value"
                           :startVal='0'
                           :separator='""'
                           :key='numberKey'
                           :endVal='item.value2'
                           :duration='3000'></countTo>{{item.title === '微力量' ? '人' : '条'}}
                </span>
              </div>
            </div>
            <div class="progress">
              <span class="label">群众满意度</span>
              <div class="progress-box">
                <el-progress :text-inside="true"
                             :stroke-width="26"
                             :percentage="connectingServiceInfo ? connectingServiceInfo.satisfactionRatio : 0"></el-progress>
              </div>
            </div>
          </div>
        </div>
        <div class="development-index">
          <div class="div-title">集体经济</div>
          <div class="div-info"
               v-if="collectiveEconomy && collectiveEconomy.length > 0 && developmentIndex">
            <Echarts :width="'509px'"
                     :height="'233px'"
                     :option="developmentIndex"
                     :key="isRefreshKey"></Echarts>
            <img class="water-icon water-blue"
                 src="../../assets/images/situationMap/blue.gif" />
            <img class="water-icon water-red"
                 src="../../assets/images/situationMap/红.gif" />
            <img class="water-icon water-yellow"
                 src="../../assets/images/situationMap/黄.gif" />
            <img class="water-icon water-red2"
                 src="../../assets/images/situationMap/红.gif" />
            <img class="water-icon water-blue2"
                 src="../../assets/images/situationMap/blue.gif" />
            <img class="water-icon water-red3"
                 src="../../assets/images/situationMap/红.gif" />
            <img class="water-icon water-yellow2"
                 src="../../assets/images/situationMap/黄.gif" />
            <img class="water-icon water-red4"
                 src="../../assets/images/situationMap/红.gif" />
          </div>
        </div>
        <div class="fortress-index">
          <div class="div-title">党组织活动</div>
          <div class="div-info"
               v-if="activitiesInfo && activitiesInfo.length > 0 && organizationActivities">
            <Echarts :width="'513px'"
                     :height="'258px'"
                     :option="organizationActivities"
                     :key="isRefreshKey2"></Echarts>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入echarts图表option配置js
import option from './option.js'
import store from '@/store'
// 引入数字滚动插件
import countTo from 'vue-count-to'
// 引入地图组件
import Map from '@/components/map/gdMap'
// 引入水波球插件
import liquidfill from '@/components/echarts/liquidfill'
export default {
  data () {
    return {
      connectingServiceTime: null,
      connectingServicekeys: true,
      partyMemberDistributionTime: null,
      partyMemberDistributionindex: 0,
      memberDistributionName: [],
      countToTime: null,
      partyInfoKey: true,
      numberKey: true,
      countToKeyOen: true,
      countToKeyTow: true,
      countToKeythree: true,
      gridNum: 0, // 网格数量
      microGridNum: 0, // 微网格数量
      systemName: '百千万工程驾驶舱', // 系统名称
      villageName: '王店镇南梅村', // 农村名称
      fkRuralId: '', // 农村id
      ruralList: [], // 农村网格数据
      ruralInfo: { // 农村详情信息
        centerPhoto: '',
        groupPhoto: ''
      },
      distributeInfo: {}, // 党支部人员分布情况
      distributeList: [], // 党支部人员分布数据
      connectingServiceInfo: {}, // 连心服务详情
      collectiveEconomy: [], // 集体经济
      activitiesInfo: [], // 党组织活动数据
      rankInfo: {}, // 强基指数排名
      seriesData: [],
      setInterval: null, // 集体经济定时器
      setInterval2: null, // 党组织活动定时器
      isRefreshKey: false, // 集体经济组件刷新key
      isRefreshKey2: false, // 党组织活动组件刷新key
      developmentIndexOption: [], // 集体经济option基础数值
      titleList: [],
      partyList: [{ // 农村详情右侧内容基本数据
        title: '班子/后备',
        icon: require('../../assets/images/situationMap/44.png'),
        key: 'committeeNumber',
        value: 6
      }, {
        title: '总人口',
        icon: require('../../assets/images/situationMap/44.png'),
        key: 'populationNumber',
        value: 1989
      }, {
        title: '流动人口',
        icon: require('../../assets/images/situationMap/44.png'),
        key: 'floatingPopulationNumber',
        value: 108
      }, {
        title: '总户数',
        icon: require('../../assets/images/situationMap/44.png'),
        key: 'householdsNumber',
        value: 552
      }],
      partyType: [{ // tab标签数据
        id: 1,
        title: '学历'
      }, {
        id: 2,
        title: '性别'
      }, {
        id: 3,
        title: '年龄'
      }, {
        id: 4,
        title: '职业'
      }, {
        id: 5,
        title: '党龄'
      }, {
        id: 6,
        title: '发展党员'
      }],
      connectingService: [{ // 连心服务基础数据
        title: '微走访',
        icon: require('../../assets/images/situationMap/图标@2x(1).png'),
        key: 'visit',
        value1: 2,
        isUp: true,
        value2: 2922
      }, {
        title: '微力量',
        icon: require('../../assets/images/situationMap/图标@2x(2).png'),
        key: 'screening',
        value1: 2,
        isUp: true,
        value2: 290
      }, {
        title: '微民情',
        icon: require('../../assets/images/situationMap/图标@2x(3).png'),
        key: 'security',
        value1: 2,
        isUp: false,
        value2: 290
      }, {
        title: '微办事',
        icon: require('../../assets/images/situationMap/图标@2x(4).png'),
        key: 'research',
        value1: 2,
        isUp: false,
        value2: 180
      }],
      legendList: [{ // 地图图例数据
        color: '#3FB018',
        type: '优秀'
      }, {
        color: '#E9C622',
        type: '正常'
      }, {
        color: '#F04F43',
        type: '较差'
      }],
      activeIndex: '党龄', // tab标签页选择索引
      participationRate: {}, // 党员活动平均参与率
      educationOption: {}, // 党组织情况
      organizationActivities: {},// 党组织活动
      evaluationScore: {}, // 强基指数
      developmentIndex: {} // 集体经济
    }
  },
  components: {
    Echarts: () => import('@/components/echarts/echarts'),
    Highcharts: () => import('@/components/echarts/highcharts'),
    Map,
    countTo,
    liquidfill
  },
  computed: {
    // 党组织书记头像地址拼接
    headerImg () {
      const path = this.ruralInfo ? this.ruralInfo.secretaryPhoto : ''
      return process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + path
    }
  },
  watch: {
  },
  mounted () {
    // this.echartsMit()
  },
  async created () {
    this.$nextTick(() => {
      // 获取路由中参数--fkRuralId
      const fkRuralIdByRoute = this.$route.query.fkRuralId
      if (fkRuralIdByRoute) {
        this.fkRuralId = fkRuralIdByRoute
      } else {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.fkRuralId = Object.values(userInfo).length > 0 ? userInfo.deptList[0].id : ''
      }
      if (this.fkRuralId) {
        this.getRuralInfo()
        this.getRuralPartyBranchPersonnelDistribute()
        this.getConnectingService()
        this.getRuralCollectiveEconomy()
        this.getRuralPartyActivities()
        this.getProjectEvaluationRaking()
        this.getRuralProjectEvaluation()
      }
    })
  },
  beforeDestroy () {
    // 清除定时器
    clearInterval(this.setInterval)
    clearInterval(this.setInterval2)
  },
  methods: {
    MemberDistributionOver () {
      if (this.partyMemberDistributionTime !== null) {
        clearInterval(this.partyMemberDistributionTime)
        this.partyMemberDistributionTime = null
      }
    },
    MemberDistributionOut () {
      if (this.partyMemberDistributionTime === null && this.partyType.length !== 0 && this.partyType.length !== 1) {
        this.partyMemberDistributionTime = setInterval(() => {
          this.setMemberDistributionTime()
        }, 4000)
      }
    },
    setMemberDistributionTime () {
      this.changeActive(this.partyType[this.memberDistributionName[this.partyMemberDistributionindex]].typeName)
      this.partyMemberDistributionindex = this.memberDistributionName[this.partyMemberDistributionindex]
    },
    enterTheSystem () {
      this.$router.replace({ name: store.state.menu.list[0].children[0].children[0].linkUrl })
    },
    setUrl (path) {
      return process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + path
    },
    /**
     * 获取农村详情信息
     */
    getRuralInfo () {
      this.$Ajax(
        '/ruralIndex/getRuralInfoByFkRuralId?fkRuralId=' + this.fkRuralId,
        'get',
        {},
        (res) => {
          this.ruralInfo = res.data
          if (this.ruralInfo) {
            this.partyList.map(item => {
              if (item.key === 'committeeNumber') {
                return item.value = this.ruralInfo.committeeManNumber + '/' + this.ruralInfo.committeeWomanNumber
              } else {
                return item.value = this.ruralInfo[item.key]
              }
            })
            this.participationRate = option(this.ruralInfo.partyActivitiesRatio).participationRate
            this.gridNum = this.ruralInfo.gridNumber
            this.microGridNum = this.ruralInfo.microGridNumber
          }
          this.$nextTick(() => {
            this.countToTime = setInterval(() => {
              this.countToKeyOen = !this.countToKeyOen
              this.countToKeyTow = !this.countToKeyTow
              this.countToKeythree = !this.countToKeythree
              this.partyInfoKey = !this.partyInfoKey
              this.numberKey = !this.numberKey
            }, 4000)
          })
        }
      )
    },
    /**
     * 根据农村id查询农村党支部人员分布情况
     */
    getRuralPartyBranchPersonnelDistribute () {
      this.$Ajax(
        '/ruralIndex/getRuralPartyBranchPersonnelDistributeByFkRuralId?fkRuralId=' + this.fkRuralId,
        'get',
        {},
        (res) => {
          if (res.data) {
            this.partyType = res.data
            if (res.data.length !== 0) {
              // 默认tab标签页选中名称
              this.activeIndex = res.data[0].typeName
              this.setOption(this.activeIndex)
              res.data.forEach((item, index) => {
                if (index !== res.data.length - 1) {
                  this.memberDistributionName[index] = index + 1
                } else {
                  this.memberDistributionName[index] = 0
                }
              })
              this.MemberDistributionOut()
            }
          }
        }
      )
    },
    /**
     * 根据农村id查询连心指数
     */
    getConnectingService () {
      this.$Ajax(
        '/ruralIndex/getRuralDefiledIndexByFkRuralId?fkRuralId=' + this.fkRuralId,
        'get',
        {},
        (res) => {
          if (res.data) {
            this.connectingServiceInfo = res.data
            this.connectingService.map(item => {
              const keys = Object.keys(res.data).filter(item2 => { if (item2.indexOf(item.key) !== -1) return item.key })
              if (keys.length > 0) {
                item.value2 = res.data[keys[0]]
                item.value1 = res.data[keys[1]] > 0 ? res.data[keys[1]] : Math.abs(res.data[keys[1]])
                item.isUp = res.data[keys[1]] > 0
              }
            })
            this.connectingServiceTime = setInterval(() => {
              this.connectingServicekeys = !this.connectingServicekeys
            }, 4000)
          }
        }
      )
    },
    /**
     * 根据农村id查询发展指数（村集体经济）
     */
    getRuralCollectiveEconomy () {
      this.$Ajax(
        '/ruralIndex/getRuralCollectiveEconomyByFkRuralId?fkRuralId=' + this.fkRuralId,
        'get',
        {},
        (res) => {
          if (res.data) {
            this.collectiveEconomy = res.data
            const year = this.collectiveEconomy.map(item => { return item.statisticsYear + '年度' })
            const value1 = this.collectiveEconomy.map(item => { return Math.round(item.operatingIncome) })
            const value2 = this.collectiveEconomy.map(item => { return Math.round(item.operatingAverageIncome) })
            const value3 = this.collectiveEconomy.map(item => { return Math.round(item.recurringIncome) })
            const value4 = this.collectiveEconomy.map(item => { return Math.round(item.recurringAverageIncome) })
            this.developmentIndexOption = [year, value1, value2, value3, value4]
            this.developmentIndex = option(this.developmentIndexOption).developmentIndex
            setTimeout(() => {
              this.setInterval = setInterval(() => {
                this.isRefreshKey = !this.isRefreshKey
              }, 5000)
            }, 1500)
          }
        }
      )
    },
    /**
     * 根据农村id查询堡垒指数（党员活动）
     */
    getRuralPartyActivities () {
      this.$Ajax(
        '/ruralIndex/getRuralPartyActivitiesByFkRuralId?fkRuralId=' + this.fkRuralId,
        'get',
        {},
        (res) => {
          if (res.data) {
            this.activitiesInfo = res.data
            const value1 = res.data.map(item => { return item.activitiesNumber })
            const value2 = res.data.map(item => { return item.activitiesRatio })
            const date = res.data.map(item => { return item.statisticsMonth }).map(item => { return item.split('-')[1] + '月' })
            this.organizationActivities = option([value1, value2, date]).organizationActivities
            setTimeout(() => {
              this.setInterval2 = setInterval(() => {
                this.isRefreshKey2 = !this.isRefreshKey2
              }, 5000)
            }, 3000)
          }
        }
      )
    },
    /**
     * 根据农村id查询强基指数排名
     */
    getProjectEvaluationRaking () {
      this.$Ajax(
        '/ruralIndex/getProjectEvaluationRakingByFkRuralId?fkRuralId=' + this.fkRuralId,
        'get',
        {},
        (res) => {
          if (res.data) this.rankInfo = res.data
        }
      )
    },
    /**
     * 根据农村id查询强基指数测评分
     */
    getRuralProjectEvaluation () {
      this.$Ajax(
        '/ruralIndex/getRuralProjectEvaluationByFkRuralId?fkRuralId=' + this.fkRuralId,
        'get',
        {
          statisticsYear: new Date().getFullYear() // 获取当前年份
        },
        (res) => {
          if (res.data) {
            // 颜色数组
            const colorList = [['#283b54', '#2e4996', '#487bec'], ['#585020', '#D1974C', '#E5C100'], ['#283b54', '#04699E', '#07E2F9'], ['#015A61', '#41D1B4', '#0CF3F2']]
            res.data.forEach((item, index) => {
              this.seriesData.push(option([], [], { value: item.evaluationScore, allValue: item.criteriaScore, title: item.typeName, color: colorList[index] }).liquidfillOp)
            })
          }
        }
      )
    },
    // 点击tab页面切换echarts
    changeActive (typeName, index) {
      index && (this.partyMemberDistributionindex = index)
      this.activeIndex = typeName
      this.setOption(this.activeIndex)
    },
    /**
     * 党员分布情况饼图配置文件
     * @param {Object} activeIndex
     */
    setOption (activeIndex) {
      this.distributeList = []
      const list = this.partyType.filter(item => item.typeName === activeIndex)
      // 饼图颜色数组
      const colorList = ['#e6b334', '#87c0ad', '#79c8d3', '#77adcd']
      if (list.length > 0) {
        list[0].distributeList.map((item, index) => {
          this.distributeList.push({
            'name': item.distributionIntervalName,
            y: item.distributionNumber,
            'color': colorList[index]
          })
        })
      }
      // 设置数据中最大值项选中效果
      let max = this.distributeList[0].y
      var i = 0
      this.distributeList.map((item, index) => {
        if (max < this.distributeList[index].y) {
          max = this.distributeList[index].y
          i = index
        }
        return i
      })
      this.distributeList[i].sliced = true
      this.distributeList[i].selected = true
      this.educationOption = option(this.distributeList).educationOption
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
@import "@/assets/style/mixin.scss";

.index-line {
  display: inline-block;
  width: 9.375rem;
  height: 0.125rem;
  background-color: red;
}
/deep/ .imsge-components .el-image {
  margin: 0;
}
.div-title {
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.5rem;
  width: 100%;
  text-align: center;
  padding: 1.38rem 0 0 0;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    content: "";
    display: inline-block;
    width: 6.25rem;
    height: 1.8rem;
    background: url(../../assets/images/situationMap/left-circle.gif) no-repeat;
    background-size: 100% 100%;
    margin-right: 0.8125rem;
  }
  &::after {
    content: "";
    display: inline-block;
    width: 6.25rem;
    height: 1.8rem;
    background: url(../../assets/images/situationMap/right-circle.gif) no-repeat;
    background-size: 100% 100%;
    margin-left: 0.8125rem;
  }
}
.div-info {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
}
#situation-map {
  width: 100%;
  height: 100%;
  position: absolute;
  font-family: "SourceHanSansSC";
  .legend {
    position: absolute;
    top: 50.91667rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 15%;
    color: #fff;
    pointer-events: none;
    .legend-type {
      font-size: 1.125rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 2.667rem;
      div > span:nth-child(1) {
        display: inline-block;
        width: 1.75rem;
        height: 1.75rem;
        border: 1px solid #fff;
        margin-right: 0.6667rem;
        vertical-align: middle;
      }
    }
    .grid-number {
      font-size: 1.3125rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 700;
    }
  }
  .top-banner {
    width: 100%;
    @include flexMixer(center, center);
    position: absolute;
    top: 0;
    .left-icon,
    .right-icon {
      width: 45.8rem;
      height: 3.4167rem;
      // display: none;
    }
    .left-icon {
      background: url(../../assets/images/situationMap/left-icon2.gif) no-repeat;
      background-size: 100%;
      margin-right: -5.5rem;
    }
    .right-icon {
      background: url(../../assets/images/situationMap/right-icon2.gif)
        no-repeat;
      background-size: contain;
      margin-left: -5.5rem;
    }
    .center-title {
      // width: 100%;
      // height: 7.0625rem;
      width: 75.3125rem;
      height: 5.375rem;
      background: url(../../assets/images/situationMap/title-font.png) no-repeat
          center,
        url(../../assets/images/situationMap/形状%2085%20拷贝%202@2x.png)
          no-repeat center;
      // background: url(../../assets/images/situationMap/banner2.png) no-repeat center;
      background-size: 38%, cover;
      // background-position: center 10px;
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      .sys-name {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding-top: 2rem;
        font-size: 2.1875rem;
        font-weight: bold;
        color: #41b7f6;
        letter-spacing: 0.5rem;
        background: linear-gradient(180deg, #ffffff 60%, #41b7f6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .enterTheSystem {
      font-weight: bold;
      color: #41b7f6;
      font-size: 1.5rem;
      cursor: pointer;
      text-align: right;
      width: 100%;
      position: absolute;
      top: 4rem;
      padding: 0rem 6rem;
      box-sizing: border-box;
    }
  }
  .bottom-main {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    position: absolute;
    top: 78px;
    width: 100%;
    pointer-events: none;
    .main-left {
      width: 48.25rem;
      // position: absolute;
      // top: 6.333rem;
      // left: 3.0833rem;
      .village-info {
        width: 100%;
        height: 52.1667rem;
        background: url(../../assets/images/situationMap/底1@2x.png) no-repeat;
        background-size: 100% 100%;
        .div-info {
          padding: 4rem 4.3333rem 0 4.6667rem;
        }
        .img {
          width: 100%;
          height: 23.4167rem;
          background: url(../../assets/images/situationMap/组%20147@2x.png)
            no-repeat;
          background-size: 100% 100%;
          padding: 1.25rem 1.6875rem;
          box-sizing: border-box;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info-box {
          @include flexMixer(center, center);
          margin-top: 2.6875rem;
          .secretary-info {
            width: 40%;
            border-right: 2px solid rgba(0, 228, 255, 0.4);
            padding: 0.3125rem 0;
            min-height: 11.91667rem;
            .header-img {
              width: 5rem;
              height: 5rem;
              border-radius: 50%;
              display: block;
              margin: 0 auto 0.75rem;
              object-fit: cover;
            }
            .party-name {
              font-size: 0.75rem;
              font-weight: 500;
              color: #00e0ff;
              margin-bottom: 0.5rem;
              text-align: center;
            }
            .label-list {
              @include flexMixer(center, center);
              & > div {
                // margin-right: 2rem;
                text-align: center;
              }
              & > div:nth-child(n + 2) {
                margin-left: 2rem;
              }
              .label-icon {
                width: 3.25rem;
                height: 3.25rem;
              }
              .label-name {
                font-size: 0.875rem;
                font-weight: 500;
                color: #fff;
                text-align: center;
              }
            }
          }
          .party-info {
            @include flexMixer(center, center);
            flex-wrap: wrap;
            width: 60%;
            & > div {
              display: flex;
              align-items: center;
              flex-direction: row;
              width: 45%;
              .imgs {
                // background-image: url(../../assets/images/Photodynamic.gif);
                // background-size: cover;
                img {
                  margin-right: 0.4375rem;
                }
              }
              &:nth-child(1),
              &:nth-child(2) {
                margin-bottom: 1.75rem;
              }
              & > div {
                display: flex;
                flex-direction: column;
                .title {
                  font-size: 0.75rem;
                  font-weight: 500;
                  color: #fff;
                  line-height: 20px;
                  &::before {
                    content: "";
                    display: inline-block;
                    width: 0.125rem;
                    height: 0.75rem;
                    background: rgba(0, 228, 255, 1);
                    margin-right: 0.375rem;
                  }
                }
                .value {
                  font-family: "PangMenZhengDao";
                  font-weight: 700;
                  font-size: 1.5625rem;
                  color: #00e4ff;
                  width: 5.75rem;
                  text-align: left;
                  word-break: break-word;
                  letter-spacing: 0.1rem;
                }
              }
            }
          }
        }
      }
      .branch-situation {
        width: 100%;
        height: 26.0833rem;
        background: url(../../assets/images/situationMap/2.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 1.5625rem;
        pointer-events: auto;
        .div-info {
          @include flexMixer(space-around, center);
          padding: 1.8125rem 1.875rem;
          height: 86%;
          .party-member-info {
            flex: 1;
            margin-left: 2.0125rem;
            height: 100%;
            .count {
              @include flexMixer(flex-start, center);
              color: #fff;
              .label {
                font-size: 1.25rem;
                white-space: nowrap;
                font-weight: 700;
                margin-right: 0.625rem;
                img {
                  width: 2.625rem;
                  height: 2.5625rem;
                  vertical-align: middle;
                  margin-right: 0.375rem;
                }
              }
              .sex-count {
                width: 2.5rem;
                height: 3.75rem;
                line-height: 3.75rem;
                background: url(../../assets/images/situationMap/矩形%20832@2x.png)
                  no-repeat;
                background-size: 100% 100%;
                font-size: 2.25rem;
                font-weight: 500;
                text-align: center;
                margin-right: 0.5rem;
                .count {
                  justify-content: center;
                }
              }
            }
            .participation-rate {
              margin-top: 1.375rem;
              .title {
                font-size: 0.875rem;
                color: #fff;
                text-align: center;
                font-weight: 500;
              }
            }
          }
          .party-member-distribution {
            height: 100%;
            flex: 2;
            text-align: center;
            ul {
              margin: 0;
              padding: 0;
              li {
                display: inline-block;
                color: #fff;
                font-size: 14px;
                text-align: center;
                border: 2px solid #54c1df;
                padding: 0.1875rem 0.625rem;
                margin-right: -1px;
                cursor: pointer;
              }
            }
            .active {
              background-color: #54c1df;
              color: #fff;
            }
            .education-echarts {
              width: 100%;
              height: 12.5rem;
            }
          }
        }
      }
    }
    .main-center {
      // position: absolute;
      // bottom: 3.6667rem;
      // left: 54.08333rem;
      margin-bottom: 3px;
      .strong-base-index {
        width: 52.25rem;
        height: 22.91667rem;
        background: #010a27;
        border: 0.125rem solid #04b9e7;
        border-radius: 0.625rem;
        pointer-events: auto;
        .div-title {
          padding: 0.75rem 0;
          &::before {
            content: "";
            display: inline-block;
            width: 4.6875rem;
            height: 0.75rem;
            background: url(../../assets/images/situationMap/title2.png)
              no-repeat;
            background-size: 100% 100%;
            margin-right: 0.8125rem;
          }
          &::after {
            content: "";
            display: inline-block;
            width: 4.6875rem;
            height: 0.75rem;
            background: url(../../assets/images/situationMap/title1.png)
              no-repeat;
            background-size: 100% 100%;
            margin-left: 0.8125rem;
          }
        }
        .div-info {
          width: 100%;
          height: 19rem;
          background: linear-gradient(
            180deg,
            rgba(1, 138, 244, 0.21),
            rgba(77, 105, 231, 0)
          );
          display: flex;
          // justify-content: space-around;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .evaluation-score {
            width: 100%;
            // height: 83%;
            height: 43%;
            flex: 8;
            position: relative;
            .grid {
              display: grid;
              grid-template-columns: 1fr 1fr 1fr 1fr;
              height: 100%;
              .gridLiquidfill {
                // border: 1px solid red;
                padding: 1.5rem;
              }
            }
            .tooltip {
              .label {
                padding: 0.5625rem 0.75rem;
                background: #071340;
                border-radius: 0.9375rem;
                box-shadow: 0px 0px 10px 1px #41b7f6 inset;
              }
              .label-line {
                display: block;
                width: 6.8125rem;
                height: 0.125rem;
                display: flex;
                align-items: center;
              }
              &:nth-child(2) {
                .label-line {
                  margin-top: 20px;
                  background: linear-gradient(
                    270deg,
                    rgba(0, 228, 255, 0.86),
                    rgba(0, 228, 255, 0)
                  );
                  animation: hideLine2 3s ease-in infinite;
                  &::after {
                    content: "";
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background: #00e4ff;
                    border-radius: 50%;
                    position: absolute;
                    left: 78px;
                  }
                  &::before {
                    content: "";
                    display: inline-block;
                    width: 1.3125rem;
                    height: 0.125rem;
                    background: rgba(0, 228, 255, 0.2);
                    transform: rotate(-30deg);
                    position: absolute;
                    left: -5px;
                    top: 44px;
                  }
                }
              }
              &:nth-child(3) {
                .label-line {
                  margin-top: 20px;
                  background: linear-gradient(
                    270deg,
                    rgba(0, 228, 255, 0.86),
                    rgba(0, 228, 255, 0)
                  );
                  animation: hideLine2 3s ease-in infinite;
                  &::after {
                    content: "";
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background: #00e4ff;
                    border-radius: 50%;
                    position: absolute;
                    left: 78px;
                  }
                  &::before {
                    content: "";
                    display: inline-block;
                    width: 1.3125rem;
                    height: 0.125rem;
                    background: rgba(0, 228, 255, 0.2);
                    transform: rotate(30deg);
                    position: absolute;
                    left: -6px;
                    top: 37px;
                  }
                }
              }
              &:nth-child(4) {
                .label-line {
                  margin-top: 20px;
                  margin-left: 4.375rem;
                  background: linear-gradient(
                    90deg,
                    rgba(0, 228, 255, 0.86),
                    rgba(0, 228, 255, 0)
                  );
                  animation: hideLine3 3s ease-in infinite;
                  &::after {
                    content: "";
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background: #00e4ff;
                    border-radius: 50%;
                    position: absolute;
                    left: 46px;
                  }
                  &::before {
                    content: "";
                    display: inline-block;
                    width: 1.3125rem;
                    height: 0.125rem;
                    background: rgba(0, 228, 255, 0.2);
                    transform: rotate(30deg);
                    position: absolute;
                    left: 122px;
                    top: 45px;
                  }
                }
              }
              &:nth-child(5) {
                .label-line {
                  margin-top: 20px;
                  margin-left: 51px;
                  background: linear-gradient(
                    90deg,
                    rgba(0, 228, 255, 0.86),
                    rgba(0, 228, 255, 0)
                  );
                  animation: hideLine3 3s ease-in infinite;
                  &::after {
                    content: "";
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background: #00e4ff;
                    border-radius: 50%;
                    position: absolute;
                    left: 46px;
                  }
                  &::before {
                    content: "";
                    display: inline-block;
                    width: 1.3125rem;
                    height: 0.125rem;
                    background: rgba(0, 228, 255, 0.2);
                    transform: rotate(-30deg);
                    position: absolute;
                    left: 119px;
                    top: 37px;
                  }
                }
              }
            }
            .evaluation-label {
              color: #fff;
              font-size: 0.875rem;
              width: 100%;
              text-align: center;
            }
          }
          .index-rank {
            // width: 9.6667rem;
            // height: 15.16667rem;
            flex: 2;
            height: 0.5rem;
            width: 90%;
            // padding: 1.6875rem 1.25rem;
            box-sizing: border-box;
            color: #fff;
            font-size: 0.875rem;
            font-weight: 500;
            margin: 1rem 0rem;
            // background: rgba(8, 15, 61, 0.6);
            border-radius: 0.75rem;
            // display: flex;
            // box-shadow: 0px 0px 10px 5px #41b7f6 inset;
            @include flexMixer(center, center, row);
            .rank-item {
              display: flex;
              align-items: flex-start;
              span:nth-child(1) {
                letter-spacing: 0.1rem;
              }
              span:nth-child(2) {
                display: inline-block;
                width: 4.075rem;
                word-break: break-all;
                text-align: left;
              }
            }
            .line {
              width: 100%;
              height: 0.0625rem;
              background: rgba(2, 188, 215, 0.7);
            }
            .total {
              font-size: 1.125rem;
              color: rgba(0, 228, 255, 1);
              span:nth-child(1) {
                text-align: left;
                width: 4rem;
                letter-spacing: 0.2rem;
              }
              span:nth-child(2) {
                width: 3.575rem;
              }
            }
          }
        }
      }
    }
    .main-right {
      width: 48.25rem;
      // position: absolute;
      // right: 3.0833rem;
      // top: 6.333rem;
      .connectivity-index {
        width: 100%;
        height: 22.8333rem;
        background: url(../../assets/images/situationMap/3.png) no-repeat;
        background-size: 100% 100%;
        .div-info {
          padding: 1.8125rem 2.8125rem 0 3.3125rem;
          .tab-list {
            @include flexMixer(space-between, center);
            flex-wrap: wrap;
            & > div {
              width: 49%;
              display: flex;
              align-items: center;
              color: #fff;
              font-size: 1.425rem;
              font-weight: 500;
              &:nth-child(1) {
                margin-bottom: 1rem;
              }
              &:nth-child(2) {
                text-align: left;
                justify-content: flex-end;
                margin-bottom: 1rem;
              }
              // &:nth-child(3) {
              //   margin-bottom: 1rem;
              // }
              &:nth-child(4) {
                text-align: left;
                justify-content: flex-end;
              }
              img {
                margin-right: 0.5rem;
              }
              .title {
                margin-right: 1.125rem;
                min-width: 3.375rem;
              }
              .percent {
                margin-right: 1.25rem;
                word-break: break-all;
                width: 4.4667rem;
                img {
                  vertical-align: middle;
                  margin-right: 0.25rem;
                }
              }
              .number {
                font-weight: 800;
                color: #00e4ff;
                word-break: break-all;
                width: 5.75rem;
              }
            }
          }
          .progress {
            display: flex;
            margin-top: 23px;
            .label {
              font-size: 1.35rem;
              color: #fff;
              font-weight: 700;
              margin-right: 1rem;
            }
            .progress-box {
              width: 81%;
              /deep/ .el-progress-bar__outer {
                background: rgba(1, 10, 39, 0);
                box-shadow: 0px 0px 5px 5px #41b7f6 inset;
              }
              /deep/ .el-progress-bar__inner {
                background: linear-gradient(90deg, #00e4ff, #f5a72b);
              }
              /deep/ .el-progress-bar__innerText {
                font-size: 13px;
                font-weight: bold;
                color: #021232;
              }
            }
          }
        }
      }
      .development-index {
        width: 100%;
        height: 27.8333rem;
        background: url(../../assets/images/situationMap/4.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 0.6875rem;
        .div-info {
          padding: 1.4375rem 2.9375rem 0;
          height: 75%;
          position: relative;
          .water-icon {
            position: absolute;
            top: 179px;
          }
          .water-blue {
            left: 55px;
          }
          .water-red {
            left: 111px;
          }
          .water-yellow {
            left: 167px;
          }
          .water-red2 {
            left: 223px;
          }
          .water-blue2 {
            left: 309px;
          }
          .water-red3 {
            left: 365px;
          }
          .water-yellow2 {
            left: 421px;
          }
          .water-red4 {
            left: 477px;
          }
        }
      }
      .fortress-index {
        width: 100%;
        height: 26.91667rem;
        background: url(../../assets/images/situationMap/5.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 1.375rem;
        pointer-events: auto;
        .div-info {
          padding: 0 2.8125rem;
          height: 80%;
        }
      }
    }
  }
}
@keyframes hideLine2 {
  from {
    width: 0;
  }
  to {
    width: 6.8125rem;
  }
}
@keyframes hideLine3 {
  from {
    width: 0;
  }
  to {
    width: 6.8125rem;
  }
}
@keyframes hideCircle {
  from {
    option: 0;
  }
  to {
    option: 1;
  }
}
</style>
